﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="">
    <meta name="keywords" content="0">
    <title>浪潮智联</title>
     <link rel="stylesheet" href="${s.base}/mobile/css/style.css">
     <link rel="stylesheet" href="${s.base}/js/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
    <script type="text/javascript" src="${s.base}/js/layui/layui.js"></script>
    <style type="text/css">


		<!--  body {
	           
                        background:#0099cc;
                        width:100%; 
                        height:100%; 
                   
                    }-->




		#head{width: 96%;height: 80px;margin-left: 2%;}
		#head ul{width: 100%;}
		#head ul li{float: left;line-height: 80px;}
		#head ul .title{width: 50%; text-align: left;font-size: 30px;color:#ffffff;font-weight: bold;}
		#head ul .btn{width: 50%; text-align: right;line-height: 80px;}
		#head ul .btn input{float: right; margin-right: 5%; width: 40%; height: 36px; margin-top: 22px;font-size: 18px;color:#ffffff;}
		#content{width: 96%;margin-left: 2%;}
		#content .team{width: 100%;}
		#content .team ul{width: 38%; height: 80px;padding: 5px 5%; margin: 5px 1%; background-color: rgba(0,0,0,0.5);border-radius: 10px;float:left;}
		#content .team_top{ width: 88%; height: 120px;padding: 5px 5%; margin: 5px 3px; background-color: rgba(0,0,0,0.5);border-radius: 10px;}
		#content .team_top table{width: 100%; height: 120px;}
		#content .team_top table tr td{line-height: 40px;font-size: 16px;color: #ffffff; }
		#content .team_top table tr .team_top_time{line-height: 20px;font-size: 15px;color: #ffffff;}
		#content .team_top table tr .team_top_value{line-height: 80px;font-size: 70px;color:#9AFC02;}
		
		#content .team ul li{float: left;opacity:1;}
		#content .team ul .show_cs{width: 40%;}
		#content .team ul .show_cs div{width: 100%;line-height: 15px;font-size: 15px;color: #ffffff;text-align: left;}
	        #content .team ul .show_cs .show_cs_img{width=10%; height=10%; margin-left: 5px;}
		#content .team ul .show_cs .show_cs_top{padding-top: 5px;color: #000000;text-align: center;}
		#content .team ul .show_cs .show_cs_bottom{padding-bottom: 5px;font-size: 10px;color: #000000;text-align: center;}
		#content .team ul .show_cs .show_value{text-align: center;font-size: 36px;color:#ffffff;font-weight: bold;line-height: 60px;}
		#content .team ul .show_cs .show_result{text-align: center; font-size: 12px;font-weight: bold;color:#003300; line-height: 10px;}
		.red{color:#FF0000;}
		.org{color:#F77303;}
		.gree{color:#9AFC02;}

		/**
        *弹窗页面
        */
		.ysq_alert{
			width:90%;
			margin-left: 10%;
			height:180px;
			padding: 20px 0px;
			background: #5F5F73;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius:10px;
			-moz-border-radius:10px;
			text-align: center;
		}
		.ysq_alert li{
			height: 55px;
			line-height: 55px;
			font-size: 28px;
			color: #FFFFFF;
		}
		.ysq_alert .alert_btn div{
			float: left;
			width: 50%;
		}
		.ysq_alert .alert_btn_left{
			text-align: right;
		}
		.ysq_alert .alert_btn_right{
			text-align: left;
		}
		.ysq_alert .alert_btn input{
			padding: 5px;
			font-size: 28px;
			color: #000000;
			margin: 10px 20px;
			border-radius:10px;
			-moz-border-radius:10px;
		}
	</style>
</head>

<body style="max-width:640px;">
	<!--页面背景-->
            
  

   <div style="position:absolute; width:100%; height:100%; z-index:-1">
	<img style="position:fixed;" src="${s.base}/mobile/img/bj.jpg" height="100%" width="100%" />
   </div>
  
  <div id="head">
  	<ul>
  		<li class="title">
  			浪潮智联
  		</li>
  		<li class="btn">
			<input type="button" onClick="window.location.href='${s.base}/inspur/index/${openid}'" class="layui-btn layui-btn-radius layui-btn-normal" value="返回"/>
			<input type="button" id="setCity" class="layui-btn layui-btn-radius layui-btn-normal" value="设置"/>
  		</li>
  	</ul>
  </div>
  <div id="content">
  	<div class="team_top">
  		<table>
  			<tr>
  				<td colspan="2" width="60%"><span>${deviceProduct.deviceCity}</span>,室外天气：${weatherType}</td>
  				<td rowspan="2" width="20%" class="team_top_value">${pm25}</td>
  			</tr>
  			<tr>
  				<td>${wendu}℃</td>
  				<td align="center"> PM2.5:</td>
  			</tr>
  			<tr>
  				<td colspan="3" class="team_top_time">更新时间：${deviceProduct.newProduct.time?string("yyyy-MM-dd HH:mm:ss")}</td>
  			</tr>
  		</table>
  	</div>
  	
            <div class="team">
		<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
	
                         <ul style="background-color:${deviceProduct.newProduct.aqiColor};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=AQI'">
				<li class="show_cs">

                                        <img src="${s.base}/mobile/img/i11.png" width=75% height=75% style=" margin-left: 6px;" />
					<div class="show_cs_top">AQI</div>
					<div class="show_cs_bottom"></div>
				</li>

                               <li class="show_cs">			
				        <div class="show_value">${deviceProduct.newProduct.aqi}</div>
				        <div class="show_result">${deviceProduct.newProduct.aqiTip}</div>
                               </li>

			</ul>
   

		</#if>
		<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
			<ul style="background-color:${deviceProduct.newProduct.pm2Color};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=PM2'">
				<li class="show_cs">
                                        <img src="${s.base}/mobile/img/i25.png"  width=75% height=75% style=" margin-left: 6px;"/>
					<div class="show_cs_top">PM2.5</div>
					<div class="show_cs_bottom">ug/m³</div>
				</li>
                               <li class="show_cs">			
				        <div class="show_value">${deviceProduct.newProduct.pm2}</div>
				        <div class="show_result">${deviceProduct.newProduct.pm2Tip}</div>
                               </li>
		
			</ul>
		</#if>
		<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
			<ul style="background-color:${deviceProduct.newProduct.pm1Color};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=PM1'">
				<li class="show_cs">
                                        <img src="${s.base}/mobile/img/i9.png"  width=75% height=75% style=" margin-left: 6px;"/>
					<div class="show_cs_top">PM1</div>
					<div class="show_cs_bottom">ug/m³</div>
				</li>
                               <li class="show_cs">			
				        <div class="show_value">${deviceProduct.newProduct.pm1}</div>
				        <div class="show_result">${deviceProduct.newProduct.pm1Tip}</div>
                               </li>
			
			</ul>
		</#if>
		<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
			<ul style="background-color:${deviceProduct.newProduct.pm10Color};"onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=PM10'">
				<li class="show_cs">
                                        <img src="${s.base}/mobile/img/i10.png"  width=75% height=75% style=" margin-left: 6px;"/>
					<div class="show_cs_top">PM10</div>
					<div class="show_cs_bottom">ug/m³</div>
				</li>
                               <li class="show_cs">			
				        <div class="show_value">${deviceProduct.newProduct.pm10}</div>
				        <div class="show_result">${deviceProduct.newProduct.pm10Tip}</div>
                               </li>
			</ul>
		</#if>
		<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="7"||deviceProduct.type=="11"||deviceProduct.type=="12"||deviceProduct.type=="13"||deviceProduct.type=="15">
			<ul style="background-color:${deviceProduct.newProduct.hchoColor};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=HCHO'">
				<li class="show_cs">
                                        <img src="${s.base}/mobile/img/i4.png"  width=75% height=75% style=" margin-left: 6px;"/>
					<div class="show_cs_top">HCHO</div>
					<div class="show_cs_bottom">mg/m³</div>
				</li>
                               <li class="show_cs">			
				        <div class="show_value">${deviceProduct.newProduct.hcho}</div>
				        <div class="show_result">${deviceProduct.newProduct.hchoTip}</div>
                               </li>
			</ul>
		</#if>
		<#if deviceProduct.type=="9"||deviceProduct.type=="10">
			<ul style="background-color:${deviceProduct.newProduct.o2Color};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=O2'">
				<li class="show_cs">
                                        <img src="${s.base}/mobile/img/i4.png"  width=75% height=75% style=" margin-left: 6px;"/>
					<div class="show_cs_top">O2</div>
					<div class="show_cs_bottom">%</div>
				</li>
                               <li class="show_cs">			
				        <div class="show_value">${deviceProduct.newProduct.o2}</div>
				        <div class="show_result">${deviceProduct.newProduct.o2Tip}</div>
                               </li>
			</ul>
		</#if>
<!--
<#if deviceProduct.type=="18">
  <ul style="background-color:#3CB371;">
      <li class="show_cs">
                              <img src="${s.base}/mobile/img/i4.png"  width=75% height=75% style=" margin-left: 6px;"/>
          <div class="show_cs_top">风向</div>

      </li>
                     <li class="show_cs">
              <div class="show_value" style="font-size: 16px;" >
                                  <#if deviceProduct.newProduct.o2=="0">北风</#if>
                                  <#if deviceProduct.newProduct.o2=="1">东北风</#if>
                                  <#if deviceProduct.newProduct.o2=="2">东风</#if>
                                  <#if deviceProduct.newProduct.o2=="3">东南风</#if>
                                  <#if deviceProduct.newProduct.o2=="4">南风</#if>
                                  <#if deviceProduct.newProduct.o2=="5">西南风</#if>
                                  <#if deviceProduct.newProduct.o2=="6">西风</#if>
                                  <#if deviceProduct.newProduct.o2=="7">西北风</#if>

                              </div>

                     </li>
  </ul>

  <ul style="background-color:#3CB371;" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=FENSU'">
      <li class="show_cs">
                              <img src="${s.base}/mobile/img/i4.png"  width=75% height=75% style=" margin-left: 6px;"/>
          <div class="show_cs_top">风速</div>
          <div class="show_cs_bottom">m/s</div>
      </li>
                     <li class="show_cs">
              <div class="show_value">${deviceProduct.newProduct.co2}</div>

                     </li>
  </ul>
</#if>
-->

<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="8"||deviceProduct.type=="10"||deviceProduct.type=="14">
  <ul style="background-color:${deviceProduct.newProduct.co2Color};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=CO2'">
      <li class="show_cs">
                              <img src="${s.base}/mobile/img/i5.png"  width=75% height=75% style=" margin-left: 6px;"/>
          <div class="show_cs_top">CO2</div>
          <div class="show_cs_bottom">ppm</div>
      </li>
                     <li class="show_cs">
              <div class="show_value">${deviceProduct.newProduct.co2}</div>
              <div class="show_result">${deviceProduct.newProduct.co2Tip}</div>
                     </li>
  </ul>
</#if>
<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="8"||deviceProduct.type=="9"||deviceProduct.type=="10"||deviceProduct.type=="11"||deviceProduct.type=="17"||deviceProduct.type=="18">
  <ul style="background-color:${deviceProduct.newProduct.temrColor};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=TEMP'">
      <li class="show_cs">
                              <img src="${s.base}/mobile/img/i0.png"  width=75% height=75% style=" margin-left: 6px;"/>
          <div class="show_cs_top">温度</div>
          <div class="show_cs_bottom">℃</div>
      </li>
                     <li class="show_cs">
              <div class="show_value">${deviceProduct.newProduct.temr}</div>
              <div class="show_result">${deviceProduct.newProduct.temrTip}</div>
                     </li>
  </ul>
</#if>
<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="8"||deviceProduct.type=="9"||deviceProduct.type=="10"||deviceProduct.type=="11"||deviceProduct.type=="17"||deviceProduct.type=="18">
  <ul style="background-color:${deviceProduct.newProduct.himColor};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=HIM'">
      <li class="show_cs">
                              <img src="${s.base}/mobile/img/i1.png"  width=75% height=75% style=" margin-left: 6px;"/>
          <div class="show_cs_top">湿度</div>
          <div class="show_cs_bottom">%</div>
      </li>


                     <li class="show_cs">
              <div class="show_value">${deviceProduct.newProduct.him}</div>
              <div class="show_result">${deviceProduct.newProduct.himTip}</div>
                     </li>

  </ul>
</#if>

<#if deviceProduct.type=="1"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="11"||deviceProduct.type=="12"||deviceProduct.type=="16">
  <ul style="background-color:${deviceProduct.newProduct.vocColor};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=VOC'">
      <li class="show_cs">
                              <img src="${s.base}/mobile/img/i4.png"  width=75% height=75% style=" margin-left: 6px;"/>
          <div class="show_cs_top">VOC</div>
          <div class="show_cs_bottom">mg/m³</div>
      </li>
                     <li class="show_cs">
              <div class="show_value">${deviceProduct.newProduct.voc}</div>
              <div class="show_result">${deviceProduct.newProduct.vocTip}</div>
                     </li>
  </ul>
</#if>
        <#if deviceProduct.type=="19">
				<ul style="background-color:${deviceProduct.newProduct.vocColor};" onclick="window.location.href='${s.base}/inspur/deviceStatistics/${openid}?id=${deviceProduct.id}&deviceId=${deviceProduct.deviceId}&deviceType=${deviceProduct.type}&type=day&code=noise'">
					<li class="show_cs">
						<img src="${s.base}/mobile/img/i4.png"  width=75% height=75% style=" margin-left: 6px;"/>
						<div class="show_cs_top">noise</div>
						<div class="show_cs_bottom">mg/m³</div>
					</li>
					<li class="show_cs">
						<div class="show_value">${deviceProduct.newProduct.noise}</div>
						<div class="show_result">${deviceProduct.newProduct.noiseTip}</div>
					</li>
				</ul>
        </#if>
  	</div>
  </div>

   <div id="alert_config" class="ysq_alert" style="display: none;" >
	   <ul>
		   <li class="alert_title" style="text-align: left;padding-left: 20px;">
			   城市设置：
		   </li>
		   <li class="alert_title">
			   <input type="hidden" id="id" value="${deviceProduct.deviceEntityId}" placeholder="请填写城市名称" class="layui-input" style="width: 80%;line-height: 28px;margin-left: 10%;"/>

			   <input type="text" id="city" value="${deviceProduct.deviceCity}" placeholder="请填写城市名称" class="layui-input" style="width: 80%;line-height: 28px;margin-left: 10%;"/>
		   </li>
		   <li class="alert_btn">
			   <div class="alert_btn_left">
				   <input type="button" onclick="setCityContent()" value="确定"/>
			   </div>
			   <div class="alert_btn_right">
				   <input type="button" onclick="lysc()" value="取消"/>
			   </div>
		   </li>

	   </ul>
   </div>
<script type="text/javascript">
	$("#setCity").bind("click",function () {
		$("#alert_config").show();
    });
	function lysc() {
        $("#alert_config").hide();
    }
        function setCityContent() {
            var id=$("#id").val();
            var city=$("#city").val();

            if(city==""||city==null){
                alert("请先填城市名称！");
                return false;
            }

            $.ajax({
                type: "POST",
                url: "/inspur/updateCity",
                data: {"id":id,"city":city},
                success: function(result){
                    if(1==result.returnInfo.state){
                        window.location.href='/inspur/device/${openid}?id=${deviceProduct.id}';
                    }else{
                        alert(result.returnInfo.errorMsg);
                    }
                },
                error: function(result){
                    alert(result);
                }
            });
        }


    //实时刷新时间单位为毫秒10分钟
    setInterval('refreshQuery()',1000*60*10);
	/* 刷新查询 */
    function refreshQuery(){
       window.location.reload();
    }
</script>
</body>

</html>
